var app = new Vue({
  el: '#app',
  data: {

    forest: {
      width: $('#forest')[0].offsetWidth,
      height: $('#forest')[0].offsetHeight
    },

    dog: {
      width: $('#dog')[0].offsetWidth,
      height: $('#dog')[0].offsetHeight,
      x: 0,
      y: 0,
      step: {
        x: 10,
        y: 2
      },
      抓捕时间: 0

    }
  },
  methods: {

    move_dog() {
      this.dog.x += this.dog.step.x
      this.dog.y += this.dog.step.y
      this.dog.抓捕时间 = Math.round( (this.dog.抓捕时间 + 0.1) * 10 ) / 10
    },

    change_dog_direct(k){

      // 左、右
      if( k === 37 && this.dog.step.x > 0 || k === 39 && this.dog.step.x < 0 ){
        this.dog.step.x = - this.dog.step.x
      }

      // 上、下
      if( k === 38 && this.dog.step.y > 0 || k === 40 && this.dog.step.y < 0 ){
        this.dog.step.y = - this.dog.step.y
      }

    },

    change_dog_direct_use_keyboard( event ){
      event.preventDefault()
      this.change_dog_direct( event.keyCode )
    }

  },
  mounted: function(){
    this.timer1 = setInterval( this.move_dog, 100)
    window.addEventListener('keydown', this.change_dog_direct_use_keyboard )
  },

  watch: {

    'dog.x' : function(){
      let x = this.dog.x
      let w = this.forest.width

      if ( x <= 0 || x >= ( w - this.dog.width )){
        this.dog.step.x = - this.dog.step.x
      }

    },

    'dog.y' : function(){
      let y = this.dog.y
      let h = this.forest.height

      if ( y <= 0 || y >= ( h - this.dog.height )){
        this.dog.step.y = - this.dog.step.y
      }

    }

  }
})

